<template>
	<div>
		<el-card shadow="never">
			<div class="agent_box">
				<div class="agent_id">ID:{{ userData.userId }}</div>
				<div class="agent_info">
					<div class="agent_infoLeft">
						<div class="left_image" v-if="!userData.userImg"><img src="../../../assets/img/head_portrait.png" alt="" /></div>
						<div class="left_image" v-if="userData.userImg"><img :src="userData.userImg" alt="" /></div>
						<div class="agent_name">{{ managePeople }}</div>
					</div>
					<div class="agent_infoCenter">
						<div class="center_one">
							<img :src="userData.userImg" alt="" />
							<div>{{ managePeople }}</div>
							<div>编辑</div>
						</div>
						<div class="center_line"></div>
						<div class="center_two">{{ userData.userName }}</div>
						<div class="center_three">{{ userData.phone }}</div>
						<div class="center_four" v-if="userData.createTime">注册时间：{{ userData.createTime }} <span style="padding-left: 25px;">{{userData.lastLoginTime}}</span></div>
					</div>
					<div class="agent_infoRight" v-if="showData">
						<div class="right_num">{{ userData.agentCount }}</div>
						<div class="right_title">代理商申请数量</div>
					</div>
				</div>
			</div>
			<div class="phone_box" v-if="hidePhone">
				<div class="phone_title">
					<div>手机号绑定</div>
					<div class="title_right">
						<div>已设置</div>
						<div v-if="phoneShow">|</div>
						<div v-if="phoneShow" @click="phoneData">修改</div>
					</div>
				</div>
				<div class="operation">
					<div v-if="userData.createTime">注册时间 {{ userData.createTime }}</div>
					<div style="margin-left: 20px;">您已绑定了手机号,id:{{ hidePhone }} [您的手机号码用于登录、找回密码，提现等]</div>
				</div>
			</div>

			<div class="phone_box">
				<div class="phone_title">
					<div>微信绑定</div>
					<div class="title_right">
						<div>已设置</div>
						<div v-if="phoneShow">|</div>
						<div v-if="phoneShow" @click="weChatData">{{ typeWord }}</div>
					</div>
				</div>
				<div class="operation">
					<div v-if="userData.createTime">注册时间 {{ userData.createTime }}</div>
					<div style="margin-left: 20px;">您已绑定了微信, [您的微信号码用于登录、找回密码，提现等]</div>
				</div>
			</div>
		</el-card>
		<el-dialog title :visible.sync="dialogPhone" width="500px" :close-on-click-modal="false">
			<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="手机号码">
					<el-input v-model="phoneChange" maxlength="11" placeholder="请输入手机号码"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogPhone = false">取 消</el-button>
				<el-button type="primary" @click="submitForm()">保 存</el-button>
			</span>
		</el-dialog>
		<el-dialog title :visible.sync="dialogWeChat" width="500px">
			<div style="margin-bottom: 20px;">绑定更换微信</div>
			<img class="chatImg" :src="imgUrl" alt="">
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogWeChat = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		userInformation,
		changePhone,
		weChatImg
	} from '../../../server/index';
import Cookie from 'js-cookie';
	export default {
		inject: ['reload'],
		data() {
			return {
				userData: [],
				showData: false,
				managePeople: '',
				hidePhone: '',
				typeWord: '',
				dialogPhone: false,
				dialogWeChat: false,
				phoneChange: '',
				ruleForm: {},
				imgUrl: '',
				phoneShow: false,
				chatCode: ''
			};
		},
		mounted() {
			this.userInformationData();
			Cookie.remove('tabList');
		},
		methods: {
			userInformationData() {
				const _this = this;
				// let dataMsg = {
				// 	userId: 'd0ce845cbf8f468b82d73cc1bc8ae533'
				// };
				_this.http.request({
					url: userInformation,
					data: '',
					success: function(res) {
						_this.userData = res;
						if (_this.userData.createTime) {
							_this.userData.createTime = false;
						}
						if (res.userId == 'admin') {
							_this.phoneShow = false;
						} else {
							_this.phoneShow = true;
						}
						if (res.type == 1) {
							_this.managePeople = '管理员';
							_this.showData = false;
						} else {
							_this.managePeople = '运营商';
							_this.showData = true;
						}
						if (res && res.phone) {
							_this.hidePhone = res.phone.substring(0, 3) + '****' + res.phone.substring(7);
						} else {
							_this.hidePhone = false;
						}
						if (res && res.openid) {
							_this.chatCode = res.openid;
						} else {
							_this.chatCode = false;
						}
						if (res.openid == '') {
							_this.typeWord = '绑定微信号';
						} else {
							_this.typeWord = '修改微信号';
						}
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						})
					}
				});
			},
			phoneData() {
				const _this = this;
				_this.dialogPhone = true;
			},
			submitForm() {
				const _this = this;
				var phoneNum;
				let reg = /^1[0-9]{10}$/;
				if (_this.phoneChange == '' || _this.phoneChange.length <= 10 || !reg.test(_this.phoneChange)) {
					this.$message({
						offset: '200',
						message: '电话号码输入错误'
					});
					return false;
				} else {
					phoneNum = _this.phoneChange
				}
				let dataMsg = {
					phone: phoneNum,
				}
				_this.http.request({
					url: changePhone,
					data: dataMsg,
					success: function() {
						_this.dialogPhone = false;
						_this.reload();
						_this.$message({
							offset: '200',
							message: '恭喜您！修改成功'
						})
					},
					/* error:function(err){
						_this.$message({
							offset: '200',
							message: err.msg
						})
					} */
				})
			},
			weChatData() {
				const _this = this;
				_this.dialogWeChat = true;
				_this.http.request({
					url: weChatImg,
					data: '',
					success: function(res) {
						_this.imgUrl = res.qrCodeUrl;
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						})
					}
				})

			},

		}
	};
</script>

<style>
	.agent_box {
		width: 99%;
		margin: auto;
		background: #f7f8fa;
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.agent_id {
		color: rgba(0, 0, 0, 0.45);
		font-size: 16px;
		font-family: latha;
		text-align: left;
		padding: 10px 0;
		box-sizing: border-box;
	}

	.agent_info {
		display: flex;
	}

	.agent_infoLeft {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.left_image {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		overflow: hidden;
	}

	.left_image img {
		width: 100%;
		height: 100%;
	}

	.agent_name {
		color: rgba(0, 0, 0, 0.87);
		font-size: 22px;
		font-weight: bold;
	}

	.agent_infoCenter {
		margin-left: 15px;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		width: 70%;
	}

	.agent_infoCenter img {
		width: 15px;
		height: 15px;
	}

	.center_one {
		display: flex;
		align-items: center;
	}

	.center_one div {
		font-size: 12px;
		color: #767676;
		margin-left: 10px;
	}

	.center_one div:last-child {
		color: #716aca;
	}

	.center_line {
		width: 100%;
		height: 2px;
		background: #dadadb;
		margin: 3px 0;
	}

	.center_two {
		font-size: 18px;
		color: #000000;
		text-align: left;
	}

	.center_three {
		color: rgba(0, 0, 0, 0.8);
		font-size: 14px;
		padding: 5px 0 15px;
		box-sizing: border-box;
		text-align: left;
	}

	.center_four {
		font-size: 12px;
		color: rgba(0, 0, 0, 0.4);
		text-align: left;
	}

	.agent_infoRight {
		margin-left: 2.5%;
		margin-top: -20px;
		height: 120px;
		width: 20%;
		background: linear-gradient(229deg, rgba(248, 163, 132, 1) 0%, rgba(253, 87, 47, 1) 100%);
		opacity: 1;
		border-radius: 12px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.right_num {
		font-size: 56px;
		font-weight: 600;
		color: white;
	}

	.right_title {
		font-size: 14px;
		color: white;
		font-weight: 500;
	}

	.phone_box {
		width: 99%;
		margin: auto;
		background: #f7f8fa;
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		margin-top: 20px;
	}

	.phone_title {
		display: flex;
		color: #3d3b56;
		font-size: 16px;
	}

	.title_right {
		font-size: 14px;
		display: flex;
		margin-left: 30px;
	}

	.title_right div:nth-child(2) {
		margin: 0 10px;
	}

	.operation {
		display: flex;
		font-size: 14px;
		color: #707070;
	}

	.operation div {
		padding: 10px 0;
		box-sizing: border-box;
	}

	.chatImg {
		width: 180px;
		height: 180px;
	}
</style>
